<!DOCTYPE=html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>
        关于文档元素测试
    </title>
    <style>

        #father{

            width:200px;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            height:200px;
            background-color:grey;


        }
        .son1{

            height:30px;
            width:100px;
            background-color:orange;
            order: 2;/*默认值为1 值越小排序越前*/
        }

        .son2{

            height:30px;
            width:100px;
            background-color:red;
        }

        .son3{

            height:30px;
            width:100px;
            background-color:#08a9b5;
        }


        .son4{

            height:30px;
            width:100px;
            background-color:#9ad1c3;
        }

        .son5{

            height:30px;
            width:100px;
            background-color:rgb(21,123,126);
            order: -1;
        }
    </style>
</head>
<body>

<div id="father">

    <div class="son1">
       1
    </div>

    <div class="son2">
       2
    </div>

    <div class="son3">
      3
    </div>
    <div class="son4">
       4
    </div>
    <div class="son5">
       5
    </div>



</div>

</body>
</html>